<template>
	<view class="new-list ">
		<view class="new-list-l" >
			<image :src="item.userurl" mode="widthFix" lazy-load></image>
		</view>
		<view class="new-list-r u-f-jsb">
			<!-- 第一行 -->
			<view class="u-f-ajc u-f-jsb">
				
				<view  class="u-f-ajc" tap="gouserinfo">
					<view class="new-name">
						{{item.username}}
					</view>
					
				<tag-sex-age :userage="item.userage" :usersex="item.usersex"></tag-sex-age>
				</view>
				
					<!-- 关注 -->
				<view v-if="item.isguanzhu">
					<text  @click="guanzhu()" class="guanzhu">取消关注</text>
				</view>
				<view   v-else>
					<text class="guanzhu" @click="guanzhu()">+ 关注</text>
					<u-icon name="close" color="#D7D7D7"></u-icon>
				</view>
			</view>
			<view class="new-list-time">
				{{item.time}}
			</view>
			<!-- 第二行 -->
			<view class="new-list-title" >
				{{item.title}}
			</view>
			<!-- 第三行 -->
			<view  class="u-f-ajc new-list-3" style="flex-direction: column; padding: 20upx 0;">
			<!-- 图片样式 -->
				<block v-for="(imgs,indexs) in item.imgs">
					<image @tap="openimg(indexs)" v-if="item.imgsrc!=''" class="new-img"  :src="imgs" mode="widthFix" lazy-load></image>
				</block>	
					<!-- 视频样式 -->
					<template v-if="item.video">
						<view class="new-video-play">
							<u-icon name="play-circle" color="#FFFFFF" size="120"></u-icon>
						</view>
						<view class="new-video-info">
							{{item.video.playnum}}次播放 {{item.video.time}}
						</view>
					</template>
					
				<!-- 分享样式 -->
					<view class="new-list-share" v-if="item.share">
						<view class="u-f-ajc">
							<image class="new-list-share-img" :src="item.share.shareimg" mode="widthFix" lazy-load></image>			
						</view>
						<view class="new-list-share-text">
							{{item.share.sharetitle}}
						</view>
					</view>
			</view>
			<!-- 第四行 -->
			<view  class="new-list-4">
				<!-- 地址 -->
				<view >
					<u-icon name="map" color="#BBBBBB" size="40"></u-icon>{{item.address}}
				</view>
				<view class="new-list-info">
					<u-icon @click="ding()" name="thumb-up-fill" :color="item.isding? '#FFE597':'#BBBBBB'" size="40"></u-icon>{{item.ding}}
					<u-icon name="more-circle-fill" color="#BBBBBB" size="40"></u-icon>{{item.talk}}
					<u-icon name="share-fill" color="#BBBBBB" size="40"></u-icon>{{item.sharenum}}
				</view>
			</view>
			<view class="new-bottom">
				
			</view>
		</view>
	</view>
</template>

<script>
	import tagSexAge from '../common/tag-sex-age.vue'
	export default{
		
		data() {
			return {
			
			}
		},
		components:{
			tagSexAge
		},
		props:{
			item:Object
		},
		methods:{
			//到用户主页
			gouserinfo(){
				uni.navigateTo({
					url:'../../pages/user/user'
				})
			},
			//关注
			guanzhu(){
				
				this.$emit('guanzhu')
				
			},
			//点赞
			ding(){
			this.$emit('ding')
			},
			//打开图片
			openimg(index){
				uni.previewImage({
					urls:this.item.imgs,
					current:index
				})
			}
		}
	}
	
</script>

<style scoped>
	.new-list-time{
		color: #D3D3D3;
		font-size: 23upx;
		margin-left: 20upx;
	}
	.new-list-title{
			margin-left: 20upx;
	}
	.new-list-r{
		width: 85%;
	}
	.new-list{
		border-bottom: #EEEEEE 1upx solid;
		padding: 10upx 0;
	}
	.new-list-share{
		display: flex;
		background-color: #F7F7F7;
		border-radius: 10upx;
		width: 100%;
		
	
	
	}
	.new-list-share-text{
		margin-left: 15upx;
		margin-top: 8upx;
	
	}
	.new-list-share-img{
		
		width: 170upx;
		height: 170upx;
		border-radius: 10upx;
	}
	
	.new-list-info>u-icon{
		margin-left: 20upx;
	}
	.new-list-3{
		position: relative;
		margin-bottom: 25upx;
	}
	.new-video-play{
		position: absolute;
		color: #FFFFFF;
		left: 250upx;
	}
	.new-video-info{
		 position: absolute;
		 color: #FFFFFF;
			right: 15px;
			bottom: 5px;
			background-color: rgba(51, 51, 51, 0.69);
			font-size: 20upx;
			border-radius: 10upx;
	}
	.new-bottom{
		margin-top: 20upx;
		display: flex;
		
	}
	/* 内容样式 */
	.new-list-4{
		display: flex;
		align-items: center;
		justify-content: space-between;
		color:#BBBBBB ;
	}
	.guanzhu{
		background-color: #F4F4F4;
		margin-right: 20upx;
		border-radius: 5upx;
	}
	.new-sex ,.new-sex-woman{
		
		background-color: #007AFF;
		color: #FFFFFF;
		border-radius: 20upx;
		font-size: 20upx;
		width: 70upx;
		line-height: 30upx;
		margin-left: 20upx;
		padding-top: 5upx;
	}
	.new-sex-woman{
		background-color: #FF7CC1;	
		
	}
	.new-name{
		color: #D5D5D5;
		margin-left: 20upx;
	}
	.new-img{
		size: 100%;
		border-radius: 10upx;
		margin-top: 15upx;
	}
	.new-list{
		display: flex;
		margin-left: 15upx;
		margin-right: 15upx;
		margin-top: 20upx;
	}
	.new-list-l>image{
		width: 90upx;
		height: 90upx;
		border-radius: 50%;
	
	}
	.uni-tab-item-title-active{
		color: #333333;
		font-weight: bold;
		
	}
	/* 导航样式 */
	.swiper-tab-list{
		width:90upx;
	}
	.tab-bottom-border{
		margin-left: 5upx;
		border-radius: 20upx;
		background-color: #FDDD32;
		border-bottom: #FDDD32 1upx solid;
		height: 13upx;
		width: 80upx;
	}
	.uni-swiper-tab{
		margin-left: 140upx;
		border-bottom: #FFFFFF 1upx solid;
	}
	.search{
		margin-left: 30upx;
	}
</style>
